import '../public/index'
import url from '../data/url'
import request from '../data/request'
import { getUrlParam } from '../data/util'
import { header } from '../data/config'

const base           = url.base,
  addPOSKeyboardBind = request.addPOSKeyboardBind,
  getChapmanList     = request.getChapmanList

const title = '商户关系',
      action = '添加';

let keyboardId = getUrlParam('keyboardId');

let form = new Vue({
  el: '#form',
  data: () => { // 设置成函数才可以调用$options.data()方法来清空数据
    return {
      keyBoardId: '',
      terminalNo: '',
      posMchId: '',
      posMch: '',
      isLock: false,
    }
  },
  mounted: function () { // 生命周期
    this.$data.keyBoardId = getUrlParam('keyboardId')
    this.getMch()
    valid()
  },
  methods: {
    getMch: function () {
      $.ajax({
        headers: header,
        data:{ keyboardId: keyboardId },
        url: base + getChapmanList
      })
        .done(function (res) {
          console.log(res)

          form.$data.posMch = res.object;
        })
        .fail(function (res) {
          console.log(res)
          console.log("error")
          layer.msg('获取商户失败', {
            icon: 5
          })

        })
        .always(function (res) {
          console.log("complete")
        })
    }
  }
})

function valid() {

  let form_valid,
    $form = $('#form')

  $.validator.setDefaults({ // 只能放在validate规则配置之前
    // 提交事件
    submitHandler: () => {
      console.log('submit!')

      let loading_modal = layer.msg('提交中...', {
        icon: 16,
        time: 0
      })

      form.isLock = true

      let data = {
        keyBoardId: form.$data.keyBoardId,
        terminalNo: form.$data.terminalNo,
        posMchId: form.$data.posMchId
      };

      delete data.posMch

      $.ajax({
        url: base + addPOSKeyboardBind,
        type: 'POST',
        headers: header,
        contentType: 'application/json',
        data: JSON.stringify(data)
      })
        .done(function (res) {
          console.log(res)

          if (res.code === -1) {
            layer.msg(`${action}${title}失败`, {
              icon: 5
            })

            form.isLock = false

            return
          }

          layer.msg(`${action}${title}成功`, {
            icon: 6
          })

          // 重置表单
          // $.extend(form.$data, form.$options.data())

          setTimeout(() => {
            window.location.href = './bind.html?keyboardId=' + keyboardId;
          }, 1000)
        })
        .fail(function (res) {
          console.log(res)

          layer.msg(`添加关系失败`, {
            icon: 5
          })

          console.log("error");
        })
        .always(function (res) {

          layer.close(loading_modal)
          form.isLock = false

        })

    }
  })

  // 验证
  form_valid = $form.validate({
    rules: {
      keyBoardId: {
        required: true
      },
      terminalNo: {
        required: true
      },
      posMchId: {
        required: true
      },
    }
  })
}

$('#bind').on('click', (e) => {

  e.preventDefault;

  window.location.href = './bind.html?keyboardId=' + keyboardId;
})